<template>
  <div style="position: relative">


    <div class="box">
      <div class="herder">
        <headerMenu @listenToHead="openAside"></headerMenu>
      </div>
      <div class="content">
        <div class="left_box">
          <cardBox>
            <div slot="title">设备利用率</div>
            <pictorialBar slot="content"></pictorialBar>
          </cardBox>
          <cardBox>
            <div slot="title">智能监控摄像头数据</div>
            <bar slot="content"></bar>
          </cardBox>
          <cardBox>
            <span slot="title">设备并发数量</span>
            <hill slot="content"></hill>
          </cardBox>
        </div>
        <div class="main_box">
          <div class="main_top">
<!--            <el-image-->
<!--              style="width: 100%; height: calc(100vh - 3.75rem)"-->
<!--              :src="url"-->
<!--              fit="fit"-->
<!--            ></el-image>-->
<!--            <aMap></aMap>-->
            <diviceMap></diviceMap>
          </div>


          <div class="main_bottom">
            <cardBox>
              <span slot="title">警告信息</span>
              <div slot="content" class="line_box">
                <div class="line" v-for="item in 4" :key="item">
                  <div class="item">
                    <el-icon class="el-icon-s-opportunity line_icon"></el-icon>
                    <div class="line_text">
                      当前警告：2021年3月4日10：42系统发现主机
                      <span class="orange_text">[12.168.3.124]</span>
                      CPU占用过高 <span class="red_text">[85%]</span>。
                    </div>
                  </div>
                  <div class="line_tag">未处理</div>
                </div>
              </div>
            </cardBox>
          </div>
        </div>
        <div class="right_box">
          <cardBox>
            <span slot="title">设备故障统计</span>
            <event slot="content"></event>
          </cardBox>
          <cardBox>
            <span slot="title">折线图</span>
            <lineChart slot="content"></lineChart>
          </cardBox>
        </div>
      </div>
    </div>
    <!--    <div id="div1" class="toolbar">-->
    <!--    </div>-->
    <!--    <el-button @click="clearEditor"></el-button>-->
    <!--    <map-con></map-con>-->
  </div>
</template>

<script>
// import E from "wangeditor";
// import hljs from 'highlight.js'
import "highlight.js/styles/monokai-sublime.css";
// import MapCon from './map'
// import aMap from "./amap";
import diviceMap from "./diviceMap";
import headerMenu from "./headMenu";
import cardBox from "./cardBox";
import bar from "./bar";
// import gauge from "./gauge";
import lineChart from "./lineChart";
import pictorialBar from "./pictorialBar";
import hill from "./hill";
import event from "./event";
export default {
  name: "index",
  components: {
    // MapCon,
    headerMenu,
    diviceMap,
    // aMap,
    bar,
    cardBox,
    // gauge,
    lineChart,
    pictorialBar,
    hill,
    event
  },
  data() {
    return {
      isMenu: false,
      url: "https://qny.samt.top/main.png",
      tipNum: "",
      infoTip: ' ""',
      sort: "",

      editor: "",
      img: "https://qny.samt.top/1.jpg",
      imgUrl: "https://qny.samt.top/mda-ncw35g350un3vaq0.mp4",
      addHtml: [
        {
          tag: "p",
          attrs: [],
          children: [
            "欢迎使用 ",
            {
              tag: "b",
              attrs: [],
              children: ["wangEditor"],
            },
            " 富文本编辑器",
          ],
        },
      ],
    };
  },
  mounted() {
    console.log('======mounted')
    /*
    // const fruits = ["Apple", "Bannana", "Orange", "Mango"];
    // fruits.describe = "My favorite fruits";
    //     const SINA_URL_PATH = 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal';
    //     this.timerr = Date.parse(this.timerr)
    //     // const E = window.wangEditor;
    //     const editor = new E("#div1");
    // // 配置 onSelectionChange 回调函数
    //     editor.config.onSelectionChange = function (newSelection) {
    //       console.log("onSelectionChange", newSelection);
    //       console.log(editor.txt.html());
    //       console.log(editor.txt.text());
    //       console.log(editor.txt.getJSON());
    //
    //
    //        {
    //        text:'wangeditor', // 当前选择文本
    //        html: '<p>wangeditor</p>', // 当前选中的html
    //        selection: selection, // 原生selection对象
    //     }
    //
    //     };
    //     // 配置颜色（文字颜色、背景色）
    //     editor.config.colors = [
    //       '#000000',
    //       '#eeece0',
    //       '#1c487f',
    //       '#4d80bf'
    //     ];
    //
    //     editor.config.emotions = [
    //       {
    //         title: '新浪', // tab 的标题
    //         type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
    //         content: [
    //           { alt: '[坏笑]', src: `${SINA_URL_PATH}/50/pcmoren_huaixiao_org.png` },
    //           { alt: '[舔屏]', src: `${SINA_URL_PATH}/40/pcmoren_tian_org.png` },
    //           { alt: '[污]', src: `${SINA_URL_PATH}/3c/pcmoren_wu_org.png` },
    //         ]
    //       },
    //       {
    //         title: 'emoji',  // tab 的标题
    //         type: 'emoji', // 'emoji' / 'image'
    //         // emoji 表情，content 是一个数组即可
    //         content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/),
    //       }
    //     ];
    //
    //     // 默认情况下，只有 IE 和 旧版 Edge 会使用兼容模式，如果需要在其它浏览器上也使用兼容模式，可以在函数内进行判定
    //     editor.config.compatibleMode = function () {
    //       // 返回 true 表示使用兼容模式；返回 false 使用标准模式
    //       return true;
    //     }
    //
    // // 当我们使用兼容模式的时候，可以自定义记录的频率，默认 200 ms
    //     editor.config.onchangeTimeout = 500; // 修改为 500 ms
    //
    // // 还可以修改历史记录的步数。默认 30 步
    //     editor.config.historyMaxSize = 50 ;// 修改为 50 步
    //
    //
    //     editor.config.onblur = function (newHtml) {
    //       console.log('onblur', newHtml) // 获取最新的 html 内容
    //     }
    //     editor.config.onfocus = function (newHtml) {
    //       console.log('onfocus', newHtml) // 获取最新的 html 内容
    //     }
    //
    // // 挂载highlight插件
    //     editor.highlight = hljs;
    //     // 菜单栏提示为上标（默认配置）
    //     // editor.config.menuTooltipPosition = 'up'
    //
    //
    // // 菜单栏提示为下标
    // editor.config.menuTooltipPosition = 'down'
    //     editor.create();
    //     editor.txt.html('<p>用 JS 设置的内容</p>'); // 重新设置编辑器内容
    //     editor.txt.append('<p>追加的内容</p>');
    //     editor.txt.setJSON(this.addHtml);
    //
    //
    //     let newMap=new Map([
    //
    //       ["1","js"],
    //
    //       ["2","css"],
    //
    //       ["3","jquery"],
    //
    //     ]);
    //     console.log(newMap.get("1")) //输出 js
    //
    // //函数调用的话：
    //
    //     function filterMap(val){
    //
    //       let newMap=new Map([
    //
    //         ["1","js"],
    //
    //         ["2","css"],
    //
    //         ["3","jquery"],
    //
    //       ]);
    //
    //       return newMap.get(val)
    //
    //     }
    //     console.log(filterMap("2"));//输出  css
    //迭代器
    // for (let [index, fruit] of fruits.entries()) {
    //   console.log(index, fruit); // 只输出数组内的值 可以 break
    // }
     */
  },
  updated() {
    console.log('===updated')
  },
  beforeDestroy() {
    console.log('========beferDestroy')
  },
  destroyed() {
    console.log('===========destroyed')
  },
  methods: {
    openAside(e) {
      this.$emit("listenToHead", e);
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100vh;
  display: grid;
  padding: 0 0.25rem;
  /*background-color: rgb(3, 29, 71);*/
  background-color: #09152d;
}
.herder {
  width: 100%;
  z-index: 11;
}
.content {
  width: 100%;
  height: calc(100vh - 1.25rem);
  display: grid;
  grid-template-columns: 4fr 9fr 4fr;
}
.left_box,
.right_box {
  height: calc(100vh - 1.25rem);
  display: grid;

}
.left_box {
  grid-template-rows: 1fr 1fr 1fr;
}
.right_box {
  grid-template-rows: 8fr 9fr;
}

.main_box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*display: grid;*/
  /*grid-template-rows: 1fr 2.5rem;*/
  /*background: url("../../assets/image/main.png") no-repeat;*/
  /*background-size: 100% 80%;*/
}
.main_top {
  width: 100%;

}

.main_bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 3.125rem;
  background-color: rgba(1, 17, 42, 0.1);
  display: flex;
}
.line_box {
  margin-top: 0.25rem;
  overflow-y: auto;
}

.line {
  margin: auto;
  width: 90%;
  height: 0.5rem;
  /*line-height: 0.5rem;*/
  color: #ffffff;
  font-size: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.0125rem dashed #0c394d;
}
.line:last-child {
  border-bottom: none;
}
.item {
  display: flex;
}
.line_icon {
  font-size: 0.3rem;
  color: #1acacc;
  margin-right: 0.125rem;
}
.line_text {
  padding-left: 0.3rem;
  height: 0.3rem;
  /*line-height: 0.3rem;*/
  position: relative;
  /* 90度方向上绘制渐变色  */ /* 0-10%:红色; 10-20%:透明色 ; 20-30%:红色 ;30-50%:由红色逐渐变成透明色透明色;
    50-70%:红色 ; 70-80%:由透明色逐渐变成红色; 80-100%:红色;*/
  /*background: linear-gradient(*/
  /*  90deg,*/
  /*  #1acacc 0%,*/
  /*  rgba(26, 202, 204, 0) 30%*/
  /*);*/
  background: url("../../assets/image/table_boder.png") no-repeat;
  background-size: 40% 100%;
  /*background-image: linear-gradient(#1acacc, rgba(26, 202, 204, 0));*/
}
.line_tag {
  width: 1rem;
  height: 0.3rem;
  background-color: rgba(26, 202, 204, 0.6);
  border-radius: 0.0625rem;
  text-align: center;
  font-weight: 500;
}
</style>
